<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :modal="model"
    top="5vh"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="90px"
      :model="formData"
      :rules="state.formRules"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="表单名称:" prop="formName">
            <el-input
              v-model="formData.formName"
              :maxlength="32"
              show-word-limit
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表单简码:" prop="formCode">
            <el-input
              v-model="formData.formCode"
              :maxlength="32"
              show-word-limit
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="formStatus">
            <EasyDictSelect
              ref="statusRef"
              :default-value="formData.formStatus"
              dict-code="1002"
              show-all="N"
              @change="handleStatusChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="表单备注:" prop="formRemark">
            <el-input
              v-model="formData.formRemark"
              :maxlength="256"
              :rows="2"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button icon="CircleCloseFilled" type="warning" @click="close">
        取 消
      </el-button>
      <el-button
        icon="DocumentChecked"
        :disabled="state.readonly"
        type="primary"
        @click="save"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="ConfigFormEdit" lang="ts">
import { useMessage } from "@/hooks/message";
import { cloneObject } from "@/utils/common";
import { addObj, updateObj } from "@/api/admin/system/configform";
import { reactive, ref } from "vue";
import EasyDictSelect from "@/components/dictSelect.vue";

const props = defineProps({
  title: {
    type: String,
    default: "配置表单"
  },
  width: {
    type: String,
    default: "30%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);

const formData = ref({
  id: "",
  formName: "",
  formCode: "",
  formRemark: "",
  formStatus: "0",
  formInfo: ""
});

const state = reactive({
  readonly: false,
  operationAdd: false,
  dialogVisible: false,
  dialogTitle: props.title,
  formRules: {
    formName: [
      { required: true, message: "表单名称不能为空", trigger: "blur" }
    ],
    formCode: [
      { required: true, message: "表单简码不能为空", trigger: "blur" }
    ],
    formStatus: [{ required: true, message: "请选择表单状态", trigger: "blur" }]
  }
});

const show = (row, readonly) => {
  console.log(row);
  if (readonly) {
    state.readonly = readonly;
    state.dialogTitle = `${props.title}详情`;
  } else {
    state.readonly = false;
  }
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    cloneObject(formData.value, row);
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  state.dialogVisible = true;
};

const close = () => {
  state.readonly = false;
  state.operationAdd = false;
  state.dialogTitle = props.title;
  formData.value = {
    id: "",
    formName: "",
    formCode: "",
    formRemark: "",
    formStatus: "0",
    formInfo: ""
  };
  state.dialogVisible = false;
};

const handleStatusChange = val => {
  formData.value.formStatus = val;
};

const save = () => {
  formRef.value.validate().then(valid => {
    if (valid) {
      const params = {
        id: formData.value.id,
        formName: formData.value.formName,
        formCode: formData.value.formCode,
        formRemark: formData.value.formRemark,
        formStatus: formData.value.formStatus
      };
      if (state.operationAdd) {
        addObj(params).then(res => {
          if (res.code === 200) {
            useMessage().success("保存成功");
            emits("confirm", {});
            close();
          } else {
            useMessage().warning(res.msg);
          }
        });
      } else {
        updateObj(params).then(res => {
          if (res.code === 200) {
            useMessage().success("保存成功");
            emits("confirm", {});
            close();
          } else {
            useMessage().warning(res.msg);
          }
        });
      }
    }
  });
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.form-table {
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
</style>
